<template>
	<view class="w-screen h-screen relative">
		<!-- 图 -->
		<swiper v-if='state.currentIndex !== null' :current="state.currentIndex" class="full" circular @change="swiperChange">
			<swiper-item v-for="(item, index) in list" :key="item._id" class="full">
				<image v-if="state.readList.has(index)" class="full" :src="item.picurl" aspectFill @click="showMask = !showMask" />
			</swiper-item>
		</swiper>
		<!-- mask -->
		<view v-if="showMask">
			<!-- 返回 -->
			<view class="p-1 absolute left-2 top-[10vh] rounded-full bg-[rgba(0,0,0,0.4)] backdrop-blur-md" @click="back">
				<uni-icons type="back" color="#fff" size="24" />
			</view>
			<!-- 页码 -->
			<view class="w-fit absolute-x-center top-[10vh] rounded-xl px-3 py-[5rpx] text-sm bg-[rgba(0,0,0,0.4)] backdrop-blur-md">
				{{ state.currentIndex + 1 }} / {{ list.length }}
			</view>
			<!-- 日期 -->
			<view class="w-fit absolute-x-center top-[calc(10vh_+_80rpx)] text-[140rpx] text-shadow-lg">
				<uni-dateformat :date="new Date()" format="hh:mm" />
			</view>
			<!-- 时间 -->
			<view class="w-fit absolute-x-center top-[calc(10vh_+_250rpx)] text-shadow-xl">
				<uni-dateformat :date="new Date()" format="MM月dd日" />
			</view>
			<!-- 操作 -->
			<view class="w-fit absolute-x-center bottom-[20vh] bg-[#D4D0CC] flex rounded-full overflow-hidden">
				<view class="footer-item" @click="showInfo">
					<uni-icons type="info" color="rgba(0,0,0,0.6)" size="28" />
					<view>信息</view>
				</view>
				<view class="footer-item" @click="showRemark">
					<uni-icons type="star" color="rgba(0,0,0,0.6)" size="28" />
					<view>{{ currentItem.score }}分</view>
				</view>
				<view class="footer-item" @click="downloadImage">
					<uni-icons type="download" color="rgba(0,0,0,0.6)" size="25" />
					<view>下载</view>
				</view>
			</view>
		</view>

		<!-- 壁纸详情 -->
		<info-popup ref="popupRef" :info="currentItem" />
		<!-- 评分 -->
		<remark ref="remarkRef" :info="currentItem" @udpate="updateRate" />
	</view>
</template>

<script setup>
	import infoPopup from './components/infoPopup.vue'
	import remark from './components/remark.vue'
	import { computed, reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useAppStore } from '@/store/modules'
	import { storeToRefs } from 'pinia'
	const { detailList } = storeToRefs(useAppStore())

	const showMask = ref(true)
	const popupRef = ref(null)
	const remarkRef = ref(null)
	const state = reactive({
		currentIndex: null,
		readList: new Set()
	})

	const list = computed(() => {
		return detailList.value.map((v) => ({
			...v,
			picurl: v.smallPicurl.replace('_small.webp', '.jpg')
		}))
	})
	const currentItem = computed(() => detailList.value[state.currentIndex])

	// 设置当前索引  和前后两张的索引
	function setCurrentIndex(index) {
		state.currentIndex = index
		const min = 0
		const max = detailList.value.length - 1
		state.readList.add(index - 1 < min ? max : index - 1)
		state.readList.add(index)
		state.readList.add(index + 1 > max ? min : index + 1)
	}
	// 返回
	function back() {
		uni.navigateBack()
	}

	// 详情信息
	function showInfo() {
		popupRef.value.open()
	}

	function updateRate(e) {
		detailList.value[state.currentIndex].userScore = e
	}
	// 评分
	function showRemark() {
		remarkRef.value.open()
	}

	// 壁纸滑动
	function swiperChange(e) {
		setCurrentIndex(e.detail.current)
	}

	// 保存壁纸
	function downloadImage() {
		// #ifdef H5
		
		// #endif
		
		// 小程序
		// #ifndef H5
		
		// #endif
	}
	onLoad(({ id }) => {
		console.log(state.currentIndex );
		const index = detailList.value.findIndex((item) => item._id === id)
		setCurrentIndex(index)
	})
</script>

<style scoped lang="scss">
	.absolute-x-center {
		@apply absolute left-0 right-0 m-auto text-white;
	}

	.footer-item {
		@apply px-6 py-1 center flex-col gap-[5rpx] text-[26rpx];
		color: rgba(0, 0, 0, 0.6);
	}
</style>
